<template>
  <view class="record-card" @click="emitClick">
    <view class="card-header">
      <view class="card-title">{{ signIn.subject }}</view>
      <view class="card-subtitle" v-if="role === 'student'">老师: {{ signIn.teacherName }}</view>
      <view class="card-subtitle" v-else>学生: {{ signIn.student }}</view>
    </view>

    <view class="card-content">
      <view class="content-item">
        <text class="item-label">签到时间:</text>
        <text class="item-value">{{ signIn.studyTime }}</text>
      </view>

      <view class="content-item comment-item" v-if="signIn.studyRecord && signIn.studyStatus != 1">
        <text class="item-label">备注:</text>
        <text class="item-value">{{ signIn.studyRecord }}</text>
      </view>
    </view>

    <view class="card-footer">
      <view v-if="signIn.studyStatus == 2" class="status-badge status-leave">请假</view>
      <view v-if="signIn.studyStatus == 3" class="status-badge status-absent">缺勤</view>
      <view class="score-badge" v-if="signIn.score">
        <uni-rate :model-value="signIn.score" :max="5" :star-size="36" readonly color="#FF7D00" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import type { SignInItem } from '@/types/signInInfo'
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()
const role = memberStore.profile?.role
defineProps<{
  signIn: SignInItem
}>()
const emit = defineEmits(['click'])
const emitClick = () => {
  // 触发父组件的 click 事件
  emit('click')
}
</script>
<style scoped>
.record-card {
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  margin: 20rpx;
  overflow: hidden;
  transition: all 0.3s ease;
}

.record-card:active {
  transform: scale(0.98);
}

.card-header {
  padding: 30rpx 30rpx 20rpx;
  background-color: #f8fafc;
  border-bottom: 1rpx solid #f0f2f5;
}

.card-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.card-subtitle {
  font-size: 28rpx;
  color: #666;
}

.card-content {
  padding: 25rpx 30rpx;
}

.content-item {
  display: flex;
  margin-bottom: 20rpx;
  align-items: center;
}

.content-item:last-child {
  margin-bottom: 0;
}

.item-label {
  width: 180rpx;
  font-size: 28rpx;
  color: #999;
}

.item-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.comment-item {
  align-items: flex-start; /* 让备注内容与标签顶部对齐 */
}

.comment-item .item-value {
  min-height: 80rpx;
}

.card-footer {
  display: flex;
  justify-content: flex-end; /* 让状态和分数在最右侧展示 */
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #f8fafc;
  border-top: 1rpx solid #f0f2f5;
}

.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
  margin-right: 20rpx;
}

.status-leave {
  background-color: #fde2e2;
  color: #f56c6c;
}

.status-absent {
  background-color: #faecd8;
  color: #e6a23c;
}

.score-badge {
  background-color: #fff7e6;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}
</style>
